<template>
    <view class="qiaogoutong">
        <view class="header1">
            <view>
                <u-icon name="arrow-left" color="#2979ff" size="18" @click="icon"></u-icon>
            </view>
            <view>与客户沟通报价事宜</view>
            <view><img src="/static/img/bi.png" alt="" style="width: 20px;height: 20px;vertical-align: middle;"></view>
        </view>
        <view class="content2">
            <view class="twotong">
                <view>
                    <p style="color: #ccc;">任务类型</p>
                    <p style="color: #666; margin-top: 10px;">普通任务</p>
                </view>
                <view>
                    <p style="color: #ccc;">任务状态</p>
                    <p style="color: #666; margin-top: 10px;">进行中</p>
                </view>
                <view>
                    <p style="color: #ccc;">重要程度</p>
                    <p style="color: #666; margin-top: 10px;">重要</p>
                </view>
            </view>

            <view style="padding: 10px 10px;">
                <view style="background-color: #eee;height: 40px;">
                    <view style="display: flex; align-items: center;height: 40px;font-size: 12px;">
                        <img src="/static/img/22.png" alt="" style="width: 20px;height: 20px;">
                        任务详情
                    </view>
                </view>

                <view
                    style="margin-bottom: 1px; font-size: 14px; display: flex; justify-content: space-between;border: 1px solid #ccc;height: 20px;line-height: 20px;padding: 10px 10px;">
                    <view>任务类型</view>
                    <view>跟进任务</view>
                </view>
                <view
                    style="margin-bottom: 1px; font-size: 14px; display: flex; justify-content: space-between;border: 1px solid #ccc;height: 20px;line-height: 20px;padding: 10px 10px;">
                    <view>跟进内容</view>
                    <view>与客户沟通报价事宜</view>
                </view>
                <view
                    style="margin-bottom: 1px; font-size: 14px; display: flex; justify-content: space-between;border: 1px solid #ccc;height: 20px;line-height: 20px;padding: 10px 10px;">
                    <view>任务状态</view>
                    <view>进行中(耗时3小时10分)</view>
                </view>
                <view
                    style="margin-bottom: 1px; font-size: 14px; display: flex; justify-content: space-between;border: 1px solid #ccc;height: 20px;line-height: 20px;padding: 10px 10px;">
                    <view>跟进时间</view>
                    <view>2019-03-20 12:00</view>
                </view>
                <view
                    style="margin-bottom: 1px; font-size: 14px; display: flex; justify-content: space-between;border: 1px solid #ccc;height: 20px;line-height: 20px;padding: 10px 10px;">
                    <view>关联业务</view>
                    <view style="color: blue;">深圳木卫二科技有限公司</view>
                </view>
                <view
                    style="margin-bottom: 1px; font-size: 14px; display: flex; justify-content: space-between;border: 1px solid #ccc;height: 20px;line-height: 20px;padding: 10px 10px;">
                    <view>紧要程度</view>
                    <view>重要</view>
                </view>

                <view
                    style="margin-bottom: 1px; font-size: 14px; display: flex; justify-content: space-between;border: 1px solid #ccc;height: 20px;line-height: 20px;padding: 10px 10px;">
                    <view>跟进人员</view>
                    <view>赵小刚</view>
                </view>
                <view
                    style="margin-bottom: 1px; font-size: 14px; display: flex; justify-content: space-between;border: 1px solid #ccc;height: 20px;line-height: 20px;padding: 10px 10px;">
                    <view>通知人员</view>
                    <view>赵小刚、李小明、李小红</view>
                </view>
                <view
                    style="margin-bottom: 1px; font-size: 14px; display: flex; justify-content: space-between;border: 1px solid #ccc;height: 20px;line-height: 20px;padding: 10px 10px;">
                    <view>任务提醒</view>
                    <view>准时</view>
                </view>
                <view
                    style="margin-bottom: 1px; font-size: 14px; display: flex; justify-content: space-between;border: 1px solid #ccc;height: 20px;line-height: 20px;padding: 10px 10px;">
                    <view>提醒方式</view>
                    <view>系统信息</view>
                </view>

                <view
                    style="margin-bottom: 1px; font-size: 14px; display: flex; justify-content: space-between;border: 1px solid #ccc;height: 20px;line-height: 20px;padding: 10px 10px;">
                    <view>签到地址</view>
                    <view style="color: blue;">深圳市南山区科苑路15号</view>
                </view>
                <view
                    style="margin-bottom: 1px; font-size: 14px; display: flex; justify-content: space-between;border: 1px solid #ccc;height: 20px;line-height: 20px;padding: 10px 10px;">
                    <view>签到范围</view>
                    <view>100米内</view>
                </view>
                <view
                    style="margin-bottom: 1px; font-size: 14px; display: flex; justify-content: space-between;border: 1px solid #ccc;height: 20px;line-height: 20px;padding: 10px 10px;">
                    <view>创建时间</view>
                    <view>2019-03-20 12:00</view>
                </view>
                <view
                    style="margin-bottom: 1px; font-size: 14px; display: flex; justify-content: space-between;border: 1px solid #ccc;height: 20px;line-height: 20px;padding: 10px 10px;">
                    <view>最后更新</view>
                    <view>2019-03-20 12:00</view>
                </view>

            </view>


        </view>
        <view class="footer3">
            1111
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
const icon = () => {
    uni.navigateBack({
        delta: 1
    })
}


</script>

<style lang="scss">
.two_san {
    height: 820px;
    margin-top: 10px;
    margin-left: 8px;
    width: 360px;

    .san_li {

        height: 100px;
        width: 360px;
        background-color: rgb(249, 249, 249);
        box-shadow: 0 0 10px #ccc;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;

        view {
            padding: 5px 10px;

        }
    }
}

.display {
    display: flex;
    justify-content: space-between;
    box-shadow: 0 0 10px #ccc;
    border-radius: 10px;
    width: 360px;
    margin-left: 8px;
    height: 80px;
    line-height: 25px;
}

.active {
    color: blue;
}

.percentage {
    padding: 1px 5px;
    color: #000;
    border-radius: 100px;
    font-size: 10px;
    margin-right: -150px;
}

.twotong {
    display: flex;
    padding: 10px 10px;
    justify-content: space-between;
    text-align: center;

}

.qiaogoutong {
    width: 100vw;
    height: 100vh;
}

.header1 {
    margin-top: 20px;
    height: 20px;
    display: flex;
    justify-content: space-between;
    padding: 20px 20px;
    border-bottom: 1px solid #ccc;
}

.content2 {
    height: calc(100vh - 20px - 80px);
    overflow: hidden;
    overflow-y: scroll;
}

.footer3 {
    height: 80px;
}
</style>